<template>
  <div>
    <!--只有一些css样式引用-->
    <lab_head />

    <!--页头部导航-->
    <lab_header />

    <!--模块一：专业的IT在线实验楼平台模块-->
    <div class="navbar-banner layout-no-margin-top">
      <div class="banner-container">
        <div class="container">
          <div class="row">
            <div class="col-md-7">
              <a class="container-title">
                <img src="/static/img/container-title-2.png" />
              </a>
              <div style="margin-top: 24px">
                <a
                  id="course-btn"
                  class="course-btn btn btn-lg"
                  href="courses/index.html"
                  >进入课程</a
                >
              </div>
            </div>

            <div class="col-md-5">
              <form>
                <div class="form-group">
                  图片验证码
                  <img
                    :src="picurl"
                    width="100"
                    height="50"
                    @click="getimagecode"
                  />
                  <input
                    class="form-control"
                    name="name"
                    v-model="piccode"
                    id="n ame"
                    type="text"
                    placeholder="图形验证码"
                  />
                  <div class="help-block text-left"></div>
                </div>
                <div class="form-group">
                  <input
                    class="form-control"
                    name="email"
                    v-model="mobile"
                    id="email"
                    type="email"
                    placeholder="手机号"
                  />
                  <button @click="send" :disabled="flag">{{ msg }}</button>
                  <div class="help-block text-left"></div>
                </div>
                <div class="form-group">
                  <input
                    class="form-control"
                    name="password"
                    v-model="code"
                    id="password"
                    type="password"
                    placeholder="验证码"
                  />
                  <div class="help-block text-left"></div>
                </div>
                <button class="btn register" type="submit">加入实验楼</button>
                <p class="tip">
                  点击"加入实验楼"，表示您已经同意我们的<a
                    href="privacy/index.html"
                    target="_blank"
                  >
                    隐私条款</a
                  >
                </p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--模块二：丰富全面的计算机实验课程；在线编程环境，1秒启动； 等的介绍-->
    <div class="introduce-container" id="fourFeatures">
      <div class="container">
        <div class="row">
          <div class="introduce-unit col-sm-6 col-md-3">
            <div>
              <a class="introduce-img"
                ><img src="/static/img/introduceContainer1.gif"
              /></a>
            </div>
            <div>
              <span class="introduce-span">丰富全面的计算机实验课程</span>
            </div>
          </div>
          <div class="introduce-unit col-sm-6 col-md-3">
            <div>
              <a class="introduce-img"
                ><img src="/static/img/introduceContainer2.gif"
              /></a>
            </div>
            <div><span class="introduce-span">在线编程环境，1秒启动</span></div>
          </div>
          <div class="introduce-unit col-sm-6 col-md-3">
            <div>
              <a class="introduce-img"
                ><img src="/static/img/introduceContainer3.gif"
              /></a>
            </div>
            <div>
              <span class="introduce-span"
                >每天一个项目课，丰富你的项目经验</span
              >
            </div>
          </div>
          <div class="introduce-unit col-sm-6 col-md-3">
            <div>
              <a class="introduce-img"
                ><img src="/static/img/introduceContainer4.gif"
              /></a>
            </div>
            <div>
              <span class="introduce-span"
                >有效学习时间，真实记录你的代码生涯</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--模块三：学习路径模块-->
    <div class="line-and-laboratory">
      <div class="container">
        <div class="clearfix text-center item-header">
          <span class="line"></span>
          <span class="text-center item-title">学习路径</span>
          <span class="line"></span>
        </div>
        <div class="tab-content">
          <div class="tab-pane clearfix active" id="study-line">
            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471513730333.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">新手入门</div>
                    <div class="path-course-num">
                      <span>6</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      新手入门路径帮助对 IT
                      技术感兴趣的新手0基础入门计算机编程。本路径通过新手入门、Linux
                      及 Vim课程熟悉实验楼的实践学习环境，再以 C
                      语言和一个简单的项目引导你一步步进入计算机技术的殿堂。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471513769430.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">Python研发工程师</div>
                    <div class="path-course-num">
                      <span>83</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      Python技术路径中包含入门知识、Python基础、Web框架、基础项目、网络编程、数据与计算及综合项目七个模块。模块中的课程将带着你逐步深入，学会如何使用
                      Python
                      实现项目一个博客，桌面词典，微信机器人或网络安全软件等。完成本路径的实验课，将具备独立开发
                      Python 软件和 Web 应用的能力。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471513793360.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">C++ 研发工程师</div>
                    <div class="path-course-num">
                      <span>26</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      C++ 学习路径中将通过使用 C++ 语言实现 Web 服务器，Markdown
                      解析器，内存池以及 Docker 容器管理工具等，学习并实践 C++
                      编程基础，C++ 11/14 标准，C++
                      图像处理及增强现实技术。完成本路径的所有实验课，将能够使用
                      C++ 独立实现复杂的应用程序。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471513926288.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">大数据工程师</div>
                    <div class="path-course-num">
                      <span>36</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      大数据学习路径中会学习并实践
                      Java、Scala、Hadoop、HBase、Mahout、Sqoop及Spark等大数据技术，本路径通过大量的动手实验，在实验数据集上实践各种大数据工具，帮助你成长为具备动手能力的大数据工程师。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471513867033.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">信息安全工程师</div>
                    <div class="path-course-num">
                      <span>38</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      信息安全学习路径首先完成
                      Linux、脚本编程、数据库和网络等基础知识学习，然后通过密码学实验、系统安全实验、Web安全实验、网络安全实验四个核心模块的动手实践，强化信息安全工程师必须要掌握的系统防护，Web渗透及网络攻防等基本技能。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471514004752.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">Linux运维工程师</div>
                    <div class="path-course-num">
                      <span>33</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      Linux运维技术路径中首先学习 Linux
                      相关的基本操作和系统管理，然后依次学习并实践服务部署、数据库管理、脚本编程、系统监控和安全防护、以及Web服务运维技术。最后学习
                      Docker 容器服务和 Windows
                      Server的运维知识。本路径的实验将帮助你成为一名合格的 Linux
                      运维工程师。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471514111981.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">Java研发工程师</div>
                    <div class="path-course-num">
                      <span>25</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      Java 学习路径中将首先完成
                      Java基础、JDK、JDBC、正则表达式等基础实验，然后进阶到 J2SE
                      和 SSH 框架学习。通过使用 Java
                      语言实现日记本，个人相册、编辑器、通讯录等，学习并实践
                      Java 编程基础，SSH 项目实战以及Java Web 应用开发。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471514095761.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">PHP研发工程师</div>
                    <div class="path-course-num">
                      <span>30</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      PHP 技术路径中包含入门知识、PHP 编程基础、PHP Web
                      框架、项目实战和项目进阶五个模块。模块中的课程将带着你逐步深入，学会如何使用
                      PHP
                      实现项目一个博客，聊天室，MVC框架及搜索系统等。完成本路径所有实验课，将具备使用
                      PHP 独立开发 Web 应用的能力。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471514153000.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">Web前端工程师</div>
                    <div class="path-course-num">
                      <span>34</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      Web 前端学习路径中首先实践
                      HTML、CSS、JavaScript、jQuery、HTML5等基础知识，然后完成实现页面特效组件、网页游戏、Web应用等一系列项目，帮助你通过动手实践成长为合格的
                      Web 前端工程师。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471514037180.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">Linux研发工程师</div>
                    <div class="path-course-num">
                      <span>27</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      Linux 研发学习路径中首先学习
                      Linux基础、C语言、Git、GDB、数据结构等基础知识，然后完成
                      TCP/IP、MySQL 数据库、操作系统等实验课程。项目阶段将实现
                      cp、ls、touch、ping等一系列Linux命令和端口扫描、Web服务器、聊天室等网络应用，帮助你通过动手实践入门
                      Linux 系统研发。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471513817808.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">NodeJS研发工程师</div>
                    <div class="path-course-num">
                      <span>21</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      NodeJS 学习路径中将通过使用 NodeJS
                      实现博客、在线笔记、爬虫、即时搜索、漂流瓶、端口扫描器等应用，学习并实践
                      NodeJS 编程基础和Web
                      应用开发等技术。完成本路径的所有实验课，将能够使用 NodeJS
                      独立实现 Web 应用程序。
                    </div>
                  </div>
                </div>
              </a>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-4">
              <a href="paths/show.html">
                <div class="path-item">
                  <div class="col-xs-5 col-sm-4 path-img">
                    <img src="/static/img/1471514058548.png" />
                  </div>
                  <div class="col-xs-7 col-sm-8">
                    <div class="path-name">MongoDB工程师</div>
                    <div class="path-course-num">
                      <span>6</span>
                      门课程
                    </div>
                  </div>
                  <div class="desc-layer">
                    <div class="center">
                      MongoDB 技术路径中首先学习
                      Linux、Bash、MySQL基础知识，然后依次学习并实践
                      Memcached、Redis 和
                      MongoDB技术。本路径的实验将帮助你逐步入门 MongoDB 这类
                      NoSQL 数据库。
                    </div>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--模块四：实验课程模块-->
    <div class="line-and-laboratory">
      <div class="container">
        <div class="clearfix text-center item-header">
          <span class="line"></span>
          <div class="text-center item-title">实验课程</div>
          <span class="line"></span>
        </div>
        <div class="clearfix courses">
          <div class="col-md-3 col-sm-6 course">
            <a class="course-box" href="courses/show.html">
              <div class="sign-box">
                <i
                  class="fa fa-star-o course-follow pull-right"
                  data-follow-url="/courses/1/follow"
                  data-unfollow-url="/courses/1/unfollow"
                  style="display: none"
                ></i>
              </div>
              <div class="course-img">
                <img alt="Linux 基础入门（新版）" src="/static/img/ncn1.jpg" />
              </div>

              <div class="course-body">
                <span
                  class="course-title"
                  data-toggle="tooltip"
                  data-placement="bottom"
                  title="Linux 基础入门（新版）"
                  >Linux 基础入门（新版）</span
                >
              </div>
              <div class="course-footer">
                <span class="course-per-num pull-left">
                  <i class="fa fa-users"></i>

                  85157
                </span>
              </div>
            </a>
          </div>

          <div class="col-md-3 col-sm-6 course">
            <a class="course-box" href="courses/show.html">
              <div class="sign-box">
                <i
                  class="fa fa-star-o course-follow pull-right"
                  data-follow-url="/courses/11/follow"
                  data-unfollow-url="/courses/11/unfollow"
                  style="display: none"
                ></i>
              </div>
              <div class="course-img">
                <img alt="Go语言编程" src="/static/img/ncn11.jpg" />
              </div>

              <div class="course-body">
                <span
                  class="course-title"
                  data-toggle="tooltip"
                  data-placement="bottom"
                  title="Go语言编程"
                  >Go语言编程</span
                >
              </div>
              <div class="course-footer">
                <span class="course-per-num pull-left">
                  <i class="fa fa-users"></i>

                  5741
                </span>
              </div>
            </a>
          </div>

          <div class="col-md-3 col-sm-6 course">
            <a class="course-box" href="courses/show.html">
              <div class="sign-box">
                <i
                  class="fa fa-star-o course-follow pull-right"
                  data-follow-url="/courses/23/follow"
                  data-unfollow-url="/courses/23/unfollow"
                  style="display: none"
                ></i>
              </div>
              <div class="course-img">
                <img alt="PHP编程语言" src="/static/img/ncn23.jpg" />
              </div>

              <div class="course-body">
                <span
                  class="course-title"
                  data-toggle="tooltip"
                  data-placement="bottom"
                  title="PHP编程语言"
                  >PHP编程语言</span
                >
              </div>
              <div class="course-footer">
                <span class="course-per-num pull-left">
                  <i class="fa fa-users"></i>

                  8093
                </span>
              </div>
            </a>
          </div>

          <div class="col-md-3 col-sm-6 course">
            <a class="course-box" href="courses/show.html">
              <div class="sign-box">
                <i
                  class="fa fa-star-o course-follow pull-right"
                  data-follow-url="/courses/30/follow"
                  data-unfollow-url="/courses/30/unfollow"
                  style="display: none"
                ></i>
              </div>
              <div class="course-img">
                <img alt="Python Django Web框架" src="/static/img/ncn30.jpg" />
              </div>

              <div class="course-body">
                <span
                  class="course-title"
                  data-toggle="tooltip"
                  data-placement="bottom"
                  title="Python Django Web框架"
                  >Python Django Web框架</span
                >
              </div>
              <div class="course-footer">
                <span class="course-per-num pull-left">
                  <i class="fa fa-users"></i>

                  5691
                </span>
              </div>
            </a>
          </div>
        </div>
        <div class="clearfix item-footer">
          <div class="pull-right watch-all">
            <a href="courses/index.html">查看更多 ></a>
          </div>
        </div>
      </div>
    </div>

    <lab_footer />
  </div>
</template>

<script>
import lab_head from "./common/lab_head";
import lab_header from "./common/lab_header";
import lab_footer from "./common/lab_footer";
import { v4 as uuid4 } from "uuid";
export default {
  // head:{
  //     title:'实验楼',
  // },
  data() {
    return {
      msg: "发送短信验证码",
      piccode: "",
      mobile: "",
      code: "",
      picurl: "",
      picuuid: "",
      flag: false,
      time: 5,
    };
  },
  methods: {
    getimagecode() {
      alert("###");
      this.picuuid = uuid4();
      this.picurl = "http://localhost:5000/user/getcode?uuid=" + this.picuuid;
    },
    send() {
      if (this.piccode == "" || this.piccode == null) {
        alert("必须输入图形验证码");
        return false;
      }
      var reg = /^1[3-9]\d{9}$/;
      if (!reg.test(this.mobile)) {
        alert("必须输入正确手机号");
        return falst;
      }
      // 调用接口
      this.axios
        .post("/user/sendSmsCode", {
          piccode: this.piccode,
          mobile: this.mobile,
          uuid: this.picuuid,
        })
        .then((res) => {
          // 成功将发送按钮设置为不可用， 内容变为倒计时60秒， 为0回复
          var data = res.data;
          if (data.code == 200) {
            this.flag = true;
            var t = setInterval(() => {
              if (this.time == 0) {
                //清楚计时器
                clearInterval(t);
                this.flag = flase;
                this.time = 5;
                this.msg = "发送短信验证码";
              } else {
                this.time--;
                this.msg = this.time + "秒";
              }
            }, 1000);
          } else {
            alert(data.msg);
          }
          // 失败提示错误信息
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  //定义组建标签
  components: {
    lab_head,
    lab_header,
    lab_footer,
  },
  mounted() {
    this.getimagecode();
  },
};
</script>

<style>
</style>